<!DOCTYPE html>
<html lang="en">
<head>
  <title>Iraqi Casualties Comparison</title>
  <%= header %>
</head>

<body>
<h1>Iraqi Casualties Comparison</h1>
<p><a href="http://bds.github.io/iraq_unrest/">http://bds.github.io/iraq_unrest/</a></p>
<div id="chart_container">
  <div id="y_axis"></div>
  <div id="chart"></div>
</div>
<div id="legend"></div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.3.0/rickshaw.min.js"></script>
<script type="text/javascript">
  var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum14' } );

  var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chart"),
    renderer: 'area', width: 640, height: 480,
    series: [ {
      name: 'Iraq Body Count',
      color: palette.color(),
      data: <%= JSON.generate(data[:iraq_body_count]) %>
    }, {
      name: 'Iraq Gov',
      color: palette.color(),
      data: <%= JSON.generate(data[:iraq_gov]) %>
    }, {
      name: 'AFP',
      color: palette.color(),
      data: <%= JSON.generate(data[:afp]) %>
    } ]});

  var x_axis = new Rickshaw.Graph.Axis.Time( { 
    graph: graph
  } );

  var y_axis = new Rickshaw.Graph.Axis.Y( {
    graph: graph,
    orientation: 'left',
    element: document.getElementById('y_axis'),
  } );

  var legend = new Rickshaw.Graph.Legend({
    graph: graph,
    element: document.getElementById('legend')
  });

  var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
      graph: graph,
      legend: legend
  });

  var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight({
    graph: graph,
    legend: legend
  });

  var hoverDetail = new Rickshaw.Graph.HoverDetail( {
      graph: graph,
      yFormatter: function(y) { return Math.floor(y) + "" }
  } );

  graph.renderer.unstack = true;
  graph.render();
</script> 
</body>
</html>
